<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 23:07:50
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-21 22:38:49
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="800"
  >
    <a-form ref="formRef" v-bind="formLayout" :model="model" :rules="rules">
      <a-form-item label="用户名" prop="userName">
        <enum-select
          name="AccountType"
          v-model:value="model.accountType"
          :disabled="true"
        />
      </a-form-item>
      <a-form-item
        label="所属企业"
        prop="enterpriseId"
        v-if="model.accountType == 4"
      >
        <enteripse-select
          v-model:value="model.enterpriseId"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item label="用户名" prop="userName">
        <a-input v-model:value="model.userName" :disabled="isEdit"></a-input>
      </a-form-item>
      <a-form-item
        label="所属角色"
        prop="roleNames"
        v-if="model.accountType == 1"
      >
        <a-select
          mode="multiple"
          v-model:value="model.roleNames"
          placeholder="请选择用户角色"
          :allowClear="true"
          :options="roleOptions"
        >
          <a-select-option key="" value=""></a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="姓名" prop="name">
        <a-input v-model:value="model.name"></a-input>
      </a-form-item>
      <a-form-item label="性别" prop="gender">
        <a-select v-model:value="model.gender" :options="genderOptions">
        </a-select>
      </a-form-item>
      <a-form-item label="民族" prop="nation">
        <a-select v-model:value="model.nation" :options="nationOptions">
        </a-select>
      </a-form-item>
      <a-form-item label="学历" prop="education">
        <a-select
          v-model:value="model.education"
          :options="educationOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="电话" prop="phoneNumber">
        <a-input v-model:value="model.phoneNumber"></a-input>
      </a-form-item>
      <a-form-item label="邮箱" prop="email">
        <a-input v-model:value="model.email"></a-input>
      </a-form-item>
      <a-form-item label="地址" prop="address">
        <a-input v-model:value="model.address"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { SystemUserDto } from "@/api/system/types";
import { useFormPage } from "@/helpers/pages";
import { FormInstance } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import {
  nationOptions,
  genderOptions,
  educationOptions,
} from "@/config/options";
import api from "@/api/system/user";
import { useDataStore } from "@/store";
import { storeToRefs } from "pinia";
import { enums } from "@/plugins/enums";
import enterprise from "@/api/organize/enterprise";
const formRef = ref<FormInstance>();
const emits = defineEmits(["update:visible", "close", "success"]);
const props = defineProps({
  id: String,
  visible: { type: Boolean, default: false },
  action: {
    type: String,
    default: "create",
  },
  accountType: { type: Number, required: true },
  item: {
    type: Object,
    default() {
      return {};
    },
  },
});

const { roleItems } = storeToRefs(useDataStore());
const { model, rules, formLayout, loading, submitLoading } = useFormPage<
  SystemUserDto,
  string
>({
  rules: {
    userName: [{ required: true, message: "请输入用户名信息" }],
    name: [{ required: true, message: "请输入姓名信息" }],
    email: [{ required: true, message: "请输入邮箱信息" }],
    phoneNumber: [{ required: true, message: "请输入手机号码信息" }],
    enterpriseId: [],
  },
  model: {
    emailConfirmed: true,
    phoneNumberConfirmed: true,
    isActive: true,
    accountType: props.accountType,
    openId: "",
    userName: "",
    name: "",
    nation: "",
    gender: "",
    email: "",
    phoneNumber: "",
  },
});

const isEdit = computed(() => {
  return props.action === "edit";
});

/**
 * 弹窗标题
 */
const title = computed(() => {
  return isEdit.value ? "修改用户信息" : "添加用户信息";
});

const roleOptions = computed(() => {
  return roleItems.value.map((x) => {
    let displayName = x.extraProperties.displayName
      ? `【${x.extraProperties.displayName}】`
      : "";
    return { label: x.name + displayName, value: x.name };
  });
});

/**
 * 加载数据
 */
const loadData = () => {
  if (isEdit.value) {
    loading.value = true;
    api.get(props.id).then((res) => {
      Object.assign(model, res);
      loading.value = false;
    });
  }
};

/**
 * 提交
 */
const onSubmit = () => {
  emits("success");
  formRef.value.validate().then(() => {
    let request = isEdit.value
      ? api.update(props.id, model)
      : api.create(model);
    submitLoading.value = true;
    request
      .then((res) => {
        emits("success", res);
        emits("update:visible", false);
        emits("close");
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

/**
 * 取消
 */
const onCancel = () => {
  emits("update:visible", false);
  emits("close");
};

watch(
  () => props.visible,
  (val: boolean) => {
    val && loadData();
  },
  { immediate: true }
);

watch(
  () => model.accountType,
  () => {
    rules.enterpriseId =
      model.accountType == 4
        ? [{ required: true, message: "请选择账号关联的企业信息" }]
        : [];
  },
  { immediate: true }
);
</script>

<style lang="less" scoped></style>
